<template>
	<div>
		<mj-title type="h2" title="Dropdown 下拉菜单"></mj-title>
		<div class="page-desc">展示一组折叠的下拉菜单。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<div class="page-desc" style="margin-bottom:10px;"></div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-dropdown @command="onDropdownClick" style="margin-left:50px" transfer>
			        <a href="javascript:void(0)">
			            hover 触发
			            <Icon type="arrow-down" size="12" />
			        </a>
					<mj-dropdown-menu slot="dropdown">
						<mj-dropdown-item value="a">焦糖玛奇朵</mj-dropdown-item>
						<mj-dropdown-item value="b">香草拿铁</mj-dropdown-item>
						<mj-dropdown-item value="c">拿铁</mj-dropdown-item>
						<mj-dropdown-item value="d">卡布奇诺</mj-dropdown-item>
						<mj-dropdown-item value="e">摩卡</mj-dropdown-item>
						<mj-dropdown-item value="f">热巧克力</mj-dropdown-item>
					</mj-dropdown-menu>
				</mj-dropdown>
				<mj-dropdown @command="onDropdownClick2" trigger="click" transfer-class-name="dropdown" style="margin-left:50px;">
			        <a href="javascript:void(0)">
			            click 触发
			            <Icon type="arrow-down" size="12" />
			        </a>
					<mj-dropdown-menu slot="dropdown">
						<mj-dropdown-item value="a">红豆奶茶</mj-dropdown-item>
						<mj-dropdown-item value="b">波波奶茶</mj-dropdown-item>
						<mj-dropdown-item value="c">布丁奶茶</mj-dropdown-item>
						<mj-dropdown-item value="d">草莓冰沙</mj-dropdown-item>
						<mj-dropdown-item value="e">西柚气泡水</mj-dropdown-item>
					</mj-dropdown-menu>
				</mj-dropdown>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-dropdown @command="onDropdownClick" style="margin-left:50px" transfer>
					        &lt;a href="javascript:void(0)">
					            hover 触发
					            &lt;Icon type="arrow-down" size="12" />
					        &lt;/a>
							&lt;mj-dropdown-menu slot="dropdown">
								&lt;mj-dropdown-item value="a">焦糖玛奇朵&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="b">香草拿铁&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="c">拿铁&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="d">卡布奇诺&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="e">摩卡&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="f">热巧克力&lt;/mj-dropdown-item>
							&lt;/mj-dropdown-menu>
						&lt;/mj-dropdown>
						&lt;mj-dropdown @command="onDropdownClick" trigger="click" style="margin-left:50px;">
					        &lt;a href="javascript:void(0)">
					            click 触发
					            &lt;Icon type="arrow-down" size="12" />
					        &lt;/a>
							&lt;mj-dropdown-menu slot="dropdown">
								&lt;mj-dropdown-item value="a">红豆奶茶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="b">波波奶茶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="c">布丁奶茶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="d">草莓冰沙&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="e">西柚气泡水&lt;/mj-dropdown-item>
							&lt;/mj-dropdown-menu>
						&lt;/mj-dropdown>
					&lt;/template>
					&lt;script>
					export default {
						methods:{
							onDropdownClick(value){
							},
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="对齐方向"></mj-title>
		<div class="page-desc" style="margin-bottom:10px;">
			<p>设置 <code>placement="left"</code> 改变对齐方向，默认值：<code>center</code>，可选值：<code>left</code>、<code>right</code></p>
		</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-dropdown placement="left">
			        <a href="javascript:void(0)">
			            菜单-左
			            <Icon type="arrow-down" size="12" />
			        </a>
					<mj-dropdown-menu slot="dropdown">
						<mj-dropdown-item value="a">红豆奶茶</mj-dropdown-item>
						<mj-dropdown-item value="b">波波奶茶</mj-dropdown-item>
						<mj-dropdown-item value="c">布丁奶茶</mj-dropdown-item>
						<mj-dropdown-item value="d">草莓冰沙</mj-dropdown-item>
						<mj-dropdown-item value="e">西柚气泡水</mj-dropdown-item>
					</mj-dropdown-menu>
				</mj-dropdown>
				<mj-dropdown placement="center" style="margin:0 60px;">
			        <a href="javascript:void(0)">
			            菜单-居中
			            <Icon type="arrow-down" size="12" />
			        </a>
					<mj-dropdown-menu slot="dropdown">
						<mj-dropdown-item value="a">芒果酸奶</mj-dropdown-item>
						<mj-dropdown-item value="b">草莓酸奶</mj-dropdown-item>
						<mj-dropdown-item value="c">桃桃酸奶</mj-dropdown-item>
						<mj-dropdown-item value="e" divided>梦幻星空</mj-dropdown-item>
					</mj-dropdown-menu>
				</mj-dropdown>
				<mj-dropdown placement="right">
			        <a href="javascript:void(0)">
			            菜单-右 菜单-右
			            <Icon type="arrow-down" size="12" />
			        </a>
					<mj-dropdown-menu slot="dropdown">
						<mj-dropdown-item value="a">驴打滚</mj-dropdown-item>
						<mj-dropdown-item value="b">炸酱面</mj-dropdown-item>
						<mj-dropdown-item value="c">豆汁儿</mj-dropdown-item>
						<mj-dropdown-item value="d">冰糖葫芦</mj-dropdown-item>
						<mj-dropdown-item value="e">北京烤鸭</mj-dropdown-item>
					</mj-dropdown-menu>
				</mj-dropdown>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-dropdown placement="left">
					        &lt;a href="javascript:void(0)">
					            菜单-左
					            &lt;Icon type="arrow-down" size="12" />
					        &lt;/a>
							&lt;mj-dropdown-menu slot="dropdown">
								&lt;mj-dropdown-item value="a">红豆奶茶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="b">波波奶茶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="c">布丁奶茶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="d">草莓冰沙&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="e">西柚气泡水&lt;/mj-dropdown-item>
							&lt;/mj-dropdown-menu>
						&lt;/mj-dropdown>
						&lt;mj-dropdown placement="center" style="margin:0 60px;">
					        &lt;a href="javascript:void(0)">
					            菜单-居中
					            &lt;Icon type="arrow-down" size="12" />
					        &lt;/a>
							&lt;mj-dropdown-menu slot="dropdown">
								&lt;mj-dropdown-item value="a">芒果酸奶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="b">草莓酸奶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="c">桃桃酸奶&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="e" divided>梦幻星空&lt;/mj-dropdown-item>
							&lt;/mj-dropdown-menu>
						&lt;/mj-dropdown>
						&lt;mj-dropdown placement="right">
					        &lt;a href="javascript:void(0)">
					            菜单-右 菜单-右
					            &lt;Icon type="arrow-down" size="12" />
					        &lt;/a>
							&lt;mj-dropdown-menu slot="dropdown">
								&lt;mj-dropdown-item value="a">驴打滚&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="b">炸酱面&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="c">豆汁儿&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="d">冰糖葫芦&lt;/mj-dropdown-item>
								&lt;mj-dropdown-item value="e">北京烤鸭&lt;/mj-dropdown-item>
							&lt;/mj-dropdown-menu>
						&lt;/mj-dropdown>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Dropdown 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>trigger</td>
					<td>触发下拉的行为，可选值：<code>hover</code>、<code>click</code></td>
					<td>String</td>
					<td>hover</td>
				</tr>
				<tr>
					<td>placement</td>
					<td>下拉菜单出现的位置，可选值：<code>left</code>、<code>center</code>、<code>right</code></td>
					<td>String</td>
					<td>center</td>
				</tr>
				<tr>
					<td>transfer</td>
					<td>是否将弹层放置于 body 内，当父层有overflow:hidden属性，不受父层的裁剪影响</td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
				<tr>
					<td>transfer-class-name</td>
					<td>弹层添加额外的 class 名称</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Dropdown 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>command</td>
					<td>点击菜单项时触发</td>
					<td>value</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Dropdown Menu slot"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>dropdown</td>
					<td>下拉层</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Dropdown Item 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>value</td>
					<td>value值，可选。在command回调中使用，可获取</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	methods:{
		onDropdownClick(value){
			console.log('%c点击：dropdown','background:blue',value)
		},
		onDropdownClick2(value) {
			console.log(value);
		}
	}
}
</script>